<!--  -->
<template>
 <div style="width: 100%;">
  <a-select
    show-search
    allowClear
    :disabled="disabled"
    v-model="value_"
    placeholder="请输入银行名称关键字后可选择"
    style="width: 100%"
    :default-active-first-option="false"
    :show-arrow="false"
    :filter-option="false"
    :not-found-content="null"
    @search="handleSearch"
    @change="handleChange"
  >
    <a-spin v-if="fetching" slot="notFoundContent" size="small" />
    <a-select-option v-for="d in data" :key="d.label" :value="d.label">
      {{ d.label }}
    </a-select-option>
  </a-select>
 </div>
</template>

<script>
import getDataForDB from '@/api/qsbBusinessManagement'
export default {
  // import引入的组件需要注入到对象中才能使用
  name: 'BankBox',
  components: {},
  props: {
    disabled:{type:Boolean},
    value: {type: [String,Number], default:null},
    getDataFun:{type:Function}
  },
  data() {
    // 这里存放数据
    return {
      fetching:false,
      data: [],
      value_: '',
      tempObj:{}
    };
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {
    value:{
      handler(val){
        if(!this.$IS.isNullOrUnDef(val)){
          this.value_ = val
          // this.handleSearch(val)
        }
      },
      deep:true,
      immediate:true
    },

  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  // 方法集合
  methods: {
    handleSearch(value) {
      this.fetching = true;
      if(this.$IS.isEmpty(value)){
        return false
      }
      // fetch(value, data => (this.data = data));
      getDataForDB('查询开户行信息',{name:value}).then(res=>{
        // console.log('查询开户行信息=====>',res);
        if(res.success==true){
          if(!this.$IS.isEmpty(res.result)){
            const temp = {}
            this.data = res.result.map(item=>{
              temp[item.bankName] = {value:item.id, label:item.bankName, item}
              return {value:item.id, label:item.bankName}
            })
            this.tempObj = {...this.tempObj,...temp}
            this.getDataFun && this.getDataFun(this.tempObj)
          }
        } else {
          this.$message.warning(res.message)
        }
        this.fetching = false;
      })
    },
    handleChange(value) {
      console.log('handleChange======>', value);
      // this.value_ = value;
      this.upDateVal(value)

    },
    upDateVal(formVal){
      this.$emit('change.value', formVal)
      this.$emit('change', formVal);
      this.$emit('input', formVal);
    },
  },
  }
</script>
<style lang='less' scoped>
</style>
